<template>
  <div>
    <!-- 搜索框 -->
 <el-form ref="formData" :model="formData" label-width="100px" class="two-columns">
    <el-form-item label="部门编号">
      <el-input v-model="formData.code"></el-input>
    </el-form-item>
    <el-form-item label="部门名称">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="部门说明">
      <el-input v-model="formData.des"></el-input>
    </el-form-item>
    <el-form-item label="联系电话">
      <el-input v-model="formData.phone"></el-input>
    </el-form-item>
    <el-form-item label="部门状态">
      <el-select v-model="formData.status" placeholder="请选择部门状态">
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <!-- 将按钮项移动到这里 -->
    <el-form-item>
      <el-button type="primary" @click="findAllDeptList()">查询</el-button>
      <el-button @click="reset()">重置</el-button>
    </el-form-item>
  </el-form>
    <!-- 操作按钮 -->
    <div class="container">
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button type="success" @click="handleImport">导入</el-button>
        <el-button type="warning" @click="handleExport">导出</el-button>
        <el-button type="info" @click="handleEnable">启用</el-button>
        <el-button type="danger" @click="handleDisable">禁用</el-button>
        <el-button type="danger" @click="handleDelete">删除</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
<el-table
  :data="tableData"
  border
  style="width: 100%, height: 500px, color: black"
  @selection-change="handleSelectionChange">
  <el-table-column
    type="selection"
    width="55"/>
  <el-table-column
    prop="id"
    label="序号"
     width="120px"/>
  <el-table-column
    prop="code"
    label="部门编码"/>
  <el-table-column
    prop="name"
    label="部门名称"/>
  <el-table-column
    prop="phone"
    label="联系电话"/>
  <el-table-column
    prop="des"
    label="部门说明"/>
  <el-table-column
    prop="status"
    label="部门状态">
    <template slot-scope="scope">
      <el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'">{{ scope.row.status }}</el-tag>
    </template>
  </el-table-column>
  <el-table-column
    label="操作">
    <template slot-scope="scope">
      <el-button
        size="small"
        type="text"
        @click="handleDelete(scope.$index, scope.row)">查看</el-button>
      <el-button
        size="small"
        @click="handleUpdate(scope.$index, scope.row)"
        type="text">编辑</el-button>
      <el-button
        size="small"
        type="text"
        style="color: red;"
        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
 @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="pageNum"
  :page-sizes="[5,10,15]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"/>
 </div>
 
   <!-- 添加和修改部分 -->
    <el-dialog  :title="pojo.id ? '修改' : '添加'" :visible.sync="dialogFormVisible" style="margin: 0 auto;">
    <el-form :model="pojo" style="max-width: 500px; margin: 0 auto;">
      <el-form-item label="部门名称" required style="margin-bottom: 10px;">
        <el-input v-model="pojo.name" style="width: 100%;"></el-input>
      </el-form-item>
      <!-- 部门编码（自动生成） -->
      <el-form-item label="部门编码" style="margin-bottom: 10px;">
        <el-input v-model="pojo.num" placeholder="部门编码根据后台设定的规定自动生成" readonly style="width: 100%;"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" required style="margin-bottom: 10px;">
        <el-input v-model="pojo.phone" style="width: 100%;"></el-input>
      </el-form-item>
    <el-form-item label="部门状态" style="margin-bottom: 10px;">
        <el-select v-model="formData.status" placeholder="请选择部门状态" style="width: 100%;">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门简介" style="margin-bottom: 10px;">
        <el-input type="textarea" v-model="pojo.description" style="width: 100%;"></el-input>
      </el-form-item>
     <el-form-item label="图标封面" style="margin-bottom: 10px;">
        <el-upload
          class="avatar-uploader"
          action="/api/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeUpload">
          <img v-if="pojo.icon" :src="pojo.icon" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <!-- 按钮 -->
    <div slot="footer" class="dialog-footer" style="display: flex; justify-content: center;">
      <el-button @click="dialogFormVisible = false" style="margin-right: 10px;">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
  import { findDeptList } from "@/api/system/Dept"; // 确保此路径正确

export default {
    data() {
    return {
      tableData:[],
      pageNum:1,
      pageSize:5,
      total:0,
    pojo:{},
    dialogFormVisible:false,
    formData:{},
    multipleSelection: [],
       statusOptions: [
        { value: '启用', label: '启用' },
        { value: '禁用', label: '禁用' }
      ],
      
    };
  },
  methods: {
    
    // 重置
    reset(){
      this.formData={};
    },
    // 查询
    findAllDeptList() {
      // 设置分页参数
      this.formData.pageNum = this.pageNum;
      this.formData.pageSize = this.pageSize;
      
      
      // 调用后端API
      findDeptList(this.formData).then(res=> {
        }).catch(error => {
          console.log(error.records)
          this.tableData = error.records;
          this.total = error.total;
        }); 
        },
   
    // 分页方法
      handleSizeChange(val) {
        this.pageSize = val;
        this.findAllDeptList();
      },
      handleCurrentChange(val) {
          this.pageNum = val;
          this.findAllDeptList();
      },
      // 多选框
     handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    handleAdd() {
      // 新增部门逻辑
      this.pojo = {};
      this.dialogFormVisible = true;
      // 弹出一个对话框，用于添加部门信息
    },
    handleUpdate(row) {
      this.pojo = row;
      this.dialogFormVisible = true;
      // 编辑部门逻辑
    },
    handleDelete(index, row) {
      // 删除部门逻辑
      this.departments.splice(index, 1);
    },
    handleImport() {
      // 导入部门数据逻辑
    },
    handleExport() {
      // 导出部门数据逻辑
    },
    handleEnable() {
      // 启用部门逻辑
    },
    handleDisable() {
      // 禁用部门逻辑
    },
    handleSearch() {
      // 查询逻辑
    },
    handleReset() {
      // 重置查询条件逻辑
    },
     handleAvatarSuccess(response, file) {
      this.department.icon = response.data.url;
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLimitSize = file.size / 1024 / 1024 <= 2;

      if (!isJPG && !isPNG) {
        this.$message.error('仅限上传 JPG/PNG 格式文件!');
      }

      if (!isLimitSize) {
        this.$message.error('上传头像大小不能超过 2MB!');
      }

      return isJPG && isLimitSize;
    }
  },
  created(){
    this.findAllDeptList();
  }
};
</script>

<style scoped>
.el-dialog {
  margin: 0 auto;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}

.dialog-footer .el-button {
  margin-right: 10px;
}



.two-columns {

  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.two-columns .el-form-item {
  flex-basis: calc(50% - 10px); /* 每个表单项占据一半宽度减去一些边距 */
  margin-bottom: 20px; /* 表单项之间的间距 */
}

.two-columns .el-form-item:last-child {
  flex-basis: 100%;
  text-align: right; /* 对齐到右侧 */
}

@media screen and (max-width: 600px) {
  .two-columns .el-form-item {
    flex-basis: 100%; /* 在小屏幕设备上堆叠显示 */
  }
}
.container {
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 8px;
}

.button-row {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
   padding: 10px 0; /* 增加上下间距 */
}

.button-row .el-button {
  margin-right: 10px;
}

.el-table {
  margin-top: 20px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-table th,
.el-table td {
  text-align: center;
}

.el-table th {
  background-color: #f2f2f2;
}

.el-tag {
  margin-right: 5px;
}

.el-button--mini {
  margin-right: 5px;
}















 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>